<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <title></title>
    <meta content="" name="keywords">
    <meta content="" name="description">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/14.css">
    <link rel="stylesheet" href="css/layui-all/plugins/layui/css/layui.css">
    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="css/layui-all/plugins/layui/layui.js"></script>
    <script type="text/javascript">
        !function () {
            var htmlEl = document.getElementsByTagName('html')[0];
            var fitPage = function () {
                /* The calculate of with from zepto  */
                var w = htmlEl.getBoundingClientRect().width;
                w = Math.round(w);
                w = w > 750 ? 750 : w;
                var newW = w / 750 * 100;
                htmlEl.style.fontSize = newW + 'px';
            }
            fitPage();
            var t;
            var func = function () {
                clearTimeout(t);
                t = setTimeout(fitPage, 25);
            }
            window.addEventListener('resize', func);
        }();
    </script>
</head>
<body>
<header class="app-header app-header-fixed">
    <div class="app-title">
        <div class="app-black">
            <img style="width: 50%" src="images/010.png">
        </div>
        <h1 class="app-center-title">在线预约</h1>
        <div class="app-header-user">
            <img style="width: 50%" src="images/011.png">
        </div>
    </div>
</header>
<section class="app-content">
    <div class="app-tab-box">
        <ul class="app-tab-title overflow">
            <li class="app-tab-active">预约</li>
            <li>查询</li>
        </ul>

    </div>
    <form class="layui-form" action="">
        <p>
            <span class="app-item-title">粮食企业:</span>
            <span class="app-item-content">
                <select>
                    <option>粮食企业1</option>
                    <option>粮食企业2</option>
                    <option>粮食企业3</option>
                </select>
        </span>
        </p>
        <p>
            <span class="app-item-title">粮食库点:</span>
            <span class="app-item-content">
            <span class="app-box">
                <select>
                    <option>粮食库点1</option>
                    <option>粮食库点2</option>
                    <option>粮食库点3</option>
                </select>
            </span>
        </span>
        </p>
        <p>
            <span class="app-item-title">粮食品种:</span>
            <span class="app-item-content">
            <span class="app-box">
                <select>
                    <option>小麦</option>
                    <option>大米</option>
                    <option>黄豆</option>
                </select>
            </span>
        </span>
        </p>
        <p>
            <span class="app-item-title">预约时间:</span>
            <span class="app-item-content">
            <span class="app-box">
                <select>
                    <option>粮食企业1</option>
                    <option>粮食企业2</option>
                    <option>粮食企业3</option>
                </select>
            </span>
        </span>
        </p>
        <p>
            <span class="app-item-title">预约数量(斤):</span>
            <span class="app-item-content">
            <span class="app-box">
                <input class="app-option-input" value="0"/>
                <span class="app-icon app-icon-left">-</span>
                <span class="app-icon app-icon-right">+</span>
            </span>
        </span>
        </p>
        <p>
            <span class="app-item-title">卖粮人:</span>
            <span class="app-item-content">
            <span class="app-box">
                <input class="app-option-input"/>
            </span>
        </span>
        </p>
        <p>
            <span class="app-item-title">手机号:</span>
            <span class="app-item-content">
            <span class="app-box">
                <input class="app-option-input"/>
            </span>
        </span>
        </p>
    </form>
    <div class="app-query-box" style="display: none">
        <div>
            <span>
                <span class="app-two-title">北京市粮食库点1</span><br/>
                <span class="app-two-time">2017-08-03 15:54</span>
            </span>
            <button>待确认</button>
        </div>
        <div class="app-query-block">
            <ul>
                <li>
                    <span class="app-query-li-label">粮食企业&nbsp;:</span>
                    <span class="app-query-li-content">北京市粮食企业1</span>
                </li>
                <li>
                    <span class="app-query-li-label">粮食品种&nbsp;:</span>
                    <span class="app-query-li-content">小麦</span>
                </li>
                <li>
                    <span class="app-query-li-label">卖粮人&nbsp;:</span>
                    <span class="app-query-li-content">张三</span>
                </li>
                <li>
                    <span class="app-query-li-label">预约数量&nbsp;:</span>
                    <span class="app-query-li-content">500斤</span>
                </li>
                <li>
                    <span class="app-query-li-label">预约时间&nbsp;:</span>
                    <span class="app-query-li-content">2017-08-09 16：55</span>
                </li>
                <li>
                    <span class="app-query-li-label">手机号&nbsp;:</span>
                    <span class="app-query-li-content">13838884388</span>
                </li>
            </ul>
        </div>
    </div>
</section>
<div style="height: 1rem"></div>
<footer class="app-footer">
    <img onclick="$('#load-box').show()" src="images/018.png">
</footer>

<div id="load-box" style="display: none">
    <div class="dc-close" onclick="$('#load-box').hide()">×</div>
    <div class="floor-box">
        <div class="floor-title" style="font-size: 0.3rem;letter-spacing: 0.04rem;background: #05C0AB;">
            预约成功
        </div>
        <div class="floor-box-content">
            <img width="35%" src="images/031.png">
        </div>
        <div class="floor-box-pay-style">
            <span class="left">预约成功！</span>
        </div>
    </div>
</div>
<script>
    layui.use(['form', 'layedit', 'laydate'], function () {
        $('.layui-form-select').css({'width': '125%'})
        //$('.layui-edge').css({'right':'-22px'})
        //$(".layui-this").css({'background-color':'#05C0AB'})
        $("input").css({'border': '0.025rem solid #32CBBA'})
    });
    $(function () {
        $('.app-tab-title li').each(function (i) {
            $(this).click(function () {
                var num=$(this).index()
                $(this).addClass('app-tab-active').siblings().removeClass('app-tab-active')
                if(num==0){
                    $('.layui-form').show()
                    $('.app-query-box').hide()
                }else {
                    $('.layui-form').hide()
                    $('.app-query-box').show()
                }
            })

        })
        $('.app-icon-left').click(function () {
            var val=$(this).siblings('input').val()
            val=parseInt(val)
            if(val>0){
                $(this).siblings('input').val(val-1)
            }
        })
        $('.app-icon-right').click(function () {
            var val=$(this).siblings('input').val()
            val=parseInt(val)
            $(this).siblings('input').val(val+1)
        })
    })
</script>
</body>
</html>